<!--
 * @Author: wfl
 * @LastEditors: wfl
 * @description: 全局搜索表单
 * @updateInfo:
 * @Date: 2022-11-01 15:00:54
 * @LastEditTime: 2022-11-02 12:03:54
-->
<script lang="ts" setup name="IkContentEmpty">
import { useCssVar } from '@vueuse/core'
import type { PropType } from 'vue'
import useSettingsStore from '@g/store/modules/settings'

const props = defineProps({
  loading: {
    type: Boolean,
    default: false
  },
  // 标题
  title: {
    type: String,
    default: ''
  },
  // 副标题
  subTitle: {
    type: String,
    default: ''
  },
  // 边框
  border: {
    type: Boolean,
    default: false
  },
  // 是否显示顶部间距
  mrTop: {
    type: Boolean,
    default: true
  },
  // el-card shadow
  shadow: {
    type: String as PropType<'always' | 'never' | 'hover'>,
    default: 'never'
  },
  padding: {
    type: Boolean,
    default: true
  }
})

/**
 * @description: 高度计算
 * @return {*}
 */
const settingStore = useSettingsStore()
const el = ref(null)
const autoHeightVar = useCssVar('--auto-height', el)
watch(
  () => settingStore.settings.app.elementSize,
  newVal => {
    // 根据Element组件尺寸自动计算autoHeight变量
    nextTick(() => {
      autoHeightVar.value = `${
        newVal === 'default' ? 68 : newVal === 'large' ? 78 : 58
      }px`
    })
  },
  {
    immediate: true
  }
)
const borderWidth = computed(() => (props.border ? '1px' : '0px'))
const paddingTb = computed(() =>
  props.padding ? 'calc(var(--el-card-padding) - 2px) var(--el-card-padding)' : '0'
)
</script>

<template>
  <el-card
    ref="el"
    class="gl-content-card"
    :class="[!Object.keys($slots).length ? 'noBody' : null, mrTop ? `mt-[16px]` : null]"
    :shadow="shadow"
  >
    <template #header>
      <div class="flex items-center justify-between">
        <!-- 左上角标题 -->
        <el-tooltip
          effect="dark"
          :content="title"
        >
          <h2>
            {{ title.length > 32 ? `${title.slice(0, 32)}...` : title }}
            <span class="sub-title ml-[16px]">{{ subTitle }}</span>
            <div v-if="$slots.left">
              <slot name="left"></slot>
            </div>
          </h2>
        </el-tooltip>
        <div v-if="$slots.right" class="gl-content-btn">
          <!-- 插槽 右上角内容 一般为操作按钮 -->
          <slot name="right"></slot>
        </div>
      </div>
    </template>

    <template #default>
      <!-- 插槽 表格内容 (el-table-column) -->
      <slot></slot>
    </template>
  </el-card>
</template>

<style lang="scss" scoped>
.gl-content-card {
  --auto-height: 108px;

  flex: 1;
  overflow: auto;
  display: flex;
  flex-direction: column;
  border: none;
  height: 100%;

  &.el-card {
    :deep(.el-card__body) {
      padding: v-bind(paddingTb);
      padding-top: 0;
      height: calc(100% - var(--auto-height));
    }
  }

  :deep(.el-card__header) {
    border-bottom-width: v-bind(borderWidth);

    h2 {
      font-weight: 600;
      display: flex;
      align-items: center;

      .sub-title {
        color: var(--el-text-color-regular);
      }

      div {
        margin-left: var(--base-m);
      }
    }
  }

  &.noBody {
    :deep(.el-card__body) {
      padding: 0;
    }
  }
}
</style>
